@import "tailwindcss";

:root {
  --foreground-rgb      : 255, 255, 255;
  --background-start-rgb: 17, 24, 39;
  --background-end-rgb  : 11, 15, 25;
  --accent-color        : 99, 102, 241;
  --glass-bg            : rgba(255, 255, 255, 0.05);
  --glass-border        : rgba(255, 255, 255, 0.1);
  --glass-shadow        : 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

@layer base {
  body {
    @apply text-gray-100;
    background: linear-gradient(135deg,
        rgb(var(--background-start-rgb)),
        rgb(var(--background-end-rgb)));
    min-height: 100vh;
    overflow-x: hidden;
  }
}

@layer components {
  .glass-card {
    @apply bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 shadow-lg;
    box-shadow: var(--glass-shadow);
  }

  .glass-button {
    @apply px-6 py-3 rounded-xl font-medium transition-all duration-300;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(99, 102, 241, 0.6));
    border    : 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .glass-button:hover {
    @apply transform scale-105;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(99, 102, 241, 0.7));
  }

  .glass-input {
    @apply w-full px-4 py-3 rounded-xl transition-all duration-300;
    background     : rgba(255, 255, 255, 0.05);
    border         : 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
  }

  .glass-input:focus {
    @apply outline-none;
    background  : rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow  : 0 0 0 2px rgba(99, 102, 241, 0.2);
  }

  .glass-nav {
    @apply fixed top-0 left-0 right-0 z-50;
    background     : rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(10px);
    border-bottom  : 1px solid rgba(255, 255, 255, 0.1);
  }

  .glass-button-outline {
    background   : none;
    border       : 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .glass-button-active {
    @apply transform scale-105;
    background: linear-gradient(135deg, #6366f14d, rgba(99, 102, 241, 0.2));
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width : 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background   : rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.react-datepicker-wrapper {
  min-width: 100%;
}

.react-datepicker__header--time {
  display: none !important;
}

.react-datepicker__time-list::-webkit-scrollbar {
  display: none;
}

.react-datepicker__header--custom>div>button {
  display: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

@media (max-width: 640px) {

  .react-datepicker__time-container {
    width: 50px !important;
  }

  .react-datepicker__time-container>.react-datepicker__time>.react-datepicker__time-box {
    width: 50px !important;
  }
}

.galaxy {
  position : absolute;
  top      : 50%;
  left     : 50%;
  width    : 800px;
  height   : 800px;
  transform: translate(-50%, -50%);
  animation: rotate 60s linear infinite;
}

.star {
  position        : absolute;
  top             : 50%;
  left            : 50%;
  width           : 2px;
  height          : 2px;
  background-color: white;
  border-radius   : 50%;
  box-shadow      : 0 0 5px white;
}

/* 生成随机星星 */
.star:nth-child(1) {
  top      : 20%;
  left     : 30%;
  animation: twinkle 2s infinite ease-in-out;
}

.star:nth-child(2) {
  top      : 60%;
  left     : 80%;
  animation: twinkle 3s infinite ease-in-out;
}

.star:nth-child(3) {
  top      : 40%;
  left     : 10%;
  animation: twinkle 1.5s infinite ease-in-out;
}

.star:nth-child(4) {
  top      : 75%;
  left     : 65%;
  animation: twinkle 2.5s infinite ease-in-out;
}

.star:nth-child(5) {
  top      : 10%;
  left     : 55%;
  animation: twinkle 3.5s infinite ease-in-out;
}

.star:nth-child(6) {
  top      : 33%;
  left     : 22%;
  animation: twinkle 1.8s infinite ease-in-out;
}

.star:nth-child(7) {
  top      : 88%;
  left     : 77%;
  animation: twinkle 2.2s infinite ease-in-out;
}

.star:nth-child(8) {
  top      : 55%;
  left     : 40%;
  animation: twinkle 2.9s infinite ease-in-out;
}

.star:nth-child(9) {
  top      : 95%;
  left     : 15%;
  animation: twinkle 1.2s infinite ease-in-out;
}

.star:nth-child(10) {
  top      : 28%;
  left     : 90%;
  animation: twinkle 3.1s infinite ease-in-out;
}


.nebula {
  position     : absolute;
  top          : 50%;
  left         : 50%;
  width        : 300px;
  height       : 300px;
  border-radius: 50%;
  background   : radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
  filter       : blur(50px);
  opacity      : 0;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}